<template>
  <div class="countryShop">
    <div class="header" :class="{ fixed: fixed }">
      <div class="back">
        <van-icon name="arrow-left" @click="$router.push('/home')" />
      </div>
      <div v-if="fixed" class="title-tabs">{{ country[active].country }}馆</div>
      <!-- <img :src="'http://www.higuang365.com/'+country[active].country"/> -->
    </div>
    <!-- <van-sticky offset-top="5rem" style="width: 100%"> -->
    <van-tabs
      v-if="country.length != 1"
      v-model:active="active"
      title-active-color="#d7b68e"
      background="transparent"
      line-width="16"
      line-height="6"
      color="#d7b68e"
    >
      <van-tab
        v-for="(value, index) in country"
        :key="index"
        :title="value.country"
      >
      </van-tab>
    </van-tabs>
    <!-- </van-sticky> -->
    <div id="country" class="country">
      <!-- <h2>全球国家馆</h2> -->
      <div class="main-pic" id="countryShop">
        <div
          class="country-main"
          :class="{ active: active == index }"
          v-for="(value, index) in country"
          :key="index"
        >
          <img :src="'http://www.higuang365.com/' + value.country_banner" />
        </div>
      </div>
      <!-- <div class="country-list">
      <div class="country-item">
        <div class="country-box" v-for="(value, index) in country" :key="index"> -->
      <!-- <a
            :href="
              'http://www.higuang365.com/wap/activity-nationalPavilion-' +
              value.name +
              '.html'
            "
          > -->
      <!-- <div @click="goods(index) ">
            <img :src="'http://www.higuang365.com/public/images/common/country/'+value.country+'.jpg'" />
          </div> -->

      <!-- </a> -->
      <!-- </div> -->

      <!-- <div class="country-box">
          <a
            class="more_country"
            href="http://www.higuang365.com/wap/activity-more_country.html"
          >
            <img
              src="http://www.higuang365.com/public/images/common/country/gengduo.png"
            />
          </a>
        </div>
      </div>
    </div> -->
    </div>

    <div class="good-list-box">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        v-model:error="error"
        error-text="服务器累了，点击重新加载"
        finished-text="没有更多了"
        offset="200"
        :immediate-check="false"
        @load="onLoad"
        :key="2"
      >
        <water-fall :goods="goods" :banner="[]" ref="waterfalls">
          <template v-slot="slotProps">
            <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
            <div
              class="good-card"
              @click="
                $router.push({
                  path: '/product',
                  query: {
                    id: slotProps.value.F_ProductId,
                    parents_id: username,
                  },
                })
              "
            >
              <van-image
                class="product-img lazy-img"
                lazy-load
                :src="'http://higuang365.com/' + slotProps.value.F_pic_url"
              />
              <div class="good-desc">
                <div class="county">
                  <img
                    class="county-icon"
                    v-if="slotProps.value.F_yuliu2"
                    :src="'http://higuang365.com/' + slotProps.value.F_yuliu2"
                    alt=""
                  />

                  <div class="county-title">
                    {{ slotProps.value.F_BrandCountrie }}
                  </div>
                </div>

                <div class="title">{{ slotProps.value.F_Name }}</div>
                <span class="price"
                  >¥ <span>{{ slotProps.value.F_BdPrice }}</span></span
                >
                <span class="estimate">￥{{ slotProps.value.F_Price }}</span>
                <span
                  class="share"
                  @click.stop="
                    addGoodsCart(
                      slotProps.value.F_yuliu3,
                      slotProps.value.F_ProductId
                    )
                  "
                >
                  <i class="iconfont icon-gouwuche1"></i>
                </span>
              </div>
            </div>
          </template>
        </water-fall>
      </van-list>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  nextTick,
  onActivated,
  onDeactivated,
  onMounted,
  watch,
} from "vue";
import { getsdb_b2c_country, GetTagGoodsList } from "@/api/home";
import { useRoute, useRouter } from "vue-router";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import waterfall from "@/components/lib/waterfall.vue";

export default {
  name: "country",
  components: {
    "water-fall": waterfall,
  },
  setup() {
    const data = reactive({
      fixed: false,
      active: 0,
      country: [],
      startX: 0,
      goods: [],
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize: 100,
      country_id: "",
      username: getCookie("S[MEMBER]"),
      waterfalls: "",
    });
    const route = useRoute();

    const router = useRouter();

    onMounted(() => {
      document
        .getElementById("countryShop")
        .addEventListener("touchstart", function(e) {
          e.preventDefault();
          data.startX = e.changedTouches[0].pageX;
        });
      document
        .getElementById("countryShop")
        .addEventListener("touchend", function(e) {
          e.preventDefault();
          if (e.changedTouches.length) {
            let moveEndX = e.changedTouches[0].pageX;
            let X = moveEndX - data.startX;

            if (X > 5 && data.active >= 0) {
              if (data.active == 0) {
                data.active = data.country.length - 1;
                return;
              }
              data.active -= 1;
              return;
            }
            if (X < 0 && data.active + 1 <= data.country.length) {
              if (data.active + 1 == data.country.length) {
                data.active = 0;
                return;
              }
              data.active += 1;
              return;
            }
          }
        });
    });
    const Load = async () => {
      const res = await getsdb_b2c_country();
      if (!res[0]) {
        return;
      }

      data.country = res[1].filter((item) => item.national_country_code);
      data.country.sort(
        (a, b) => a.national_country_code - b.national_country_code
      );
      data.active = data.country.findIndex(
        (item) => item.country_id == route.query.country_id
      );

      getGoods();
    };
    const onLoad = async () => {
      data.loading = true;
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        country_id: data.country_id,
        tag_id:0,
        strlv: getCookie("MLV") ? getCookie("MLV") : 1,
      });
      // console.log("222", res);
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      // 国家馆数据去重
      // const oldres = res[1];
      // let newres = oldres.filter(function(item, index) {
      //   let arrids = [];
      //   oldres.forEach((item) => {
      //     arrids.push(item.F_ProductId);
      //   });
      //   return arrids.indexOf(item.F_ProductId) === index;
      // });

      // console.log("newres", newres);
      // data.goods.push(...newres);
      // console.log(res);
      data.goods.push(...res[1]);
      nextTick(() => {
        data.waterfalls.getHeight();
        data.loading = false;
        data.pageNum += 1;
        if (res[1].length < data.pageSize) {
          data.finished = true;
        }
      });
    };
    const getGoods = async () => {
      data.finished = false;
      data.pageNum = 1;
      data.country_id = data.country[data.active].country_id;
      router.replace({ query: { country_id: data.country_id } });
      data.waterfalls.resize();
      onLoad();
      data.goods = [];
    };
    nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
        data.fixed = Math.abs(Math.round(scrollTop)) < 300 ? false : true;
      });
    });
    let rushbuyScroll = 0;
    let country_id = data.country_id;
    onActivated(() => {
      document.getElementById("app").scrollTop = rushbuyScroll;
      if (country_id != route.query.country_id) {
        Load();
      }
    });
    onDeactivated(() => {
      rushbuyScroll = document.getElementById("app").scrollTop;
      country_id = data.country_id;
    });
    watch(
      () => data.active,
      (newVal) => {
        getGoods();
      }
    );
    return { ...toRefs(data), getGoods, onLoad, addGoodsCart };
  },
};
</script>
<style lang="scss" scoped>
.countryShop {
  min-height: 100vh;
  background: #edecec;

  .header {
    position: fixed;
    top: 5rem;
    display: flex;
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    z-index: 100;
    &.fixed {
      top: 0;
      transition: top 0.2s;
    }
  }
  .back {
    position: absolute;
    left: 2rem;
    font-size: 2rem;
  }
  .title-tabs {
    margin: auto;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .fixed {
    background: #fff;
    transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
  }
}
#country {
  padding: 0;
  h2 {
    padding-top: 1.4rem;
  }
  .country-list {
    width: 100%;
    // margin-top: -3rem;
  }
  .country-item {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    // margin: 0 1rem;
  }
  .main-pic {
    position: relative;
  }
  .country-main {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .country-main.active {
    position: relative;
    z-index: 10;
    opacity: 1;
  }
  //   .country-box {
  //     min-width: 25%;
  //     margin: 0.2rem;
  //     border-radius: 1rem;
  //     overflow: hidden;
  //   }
  .country-box {
    margin: 1px;
    min-width: calc(100% / 6 - 2px);
  }
  .more_country {
    display: block;
  }
}

.good-list-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  .good-list {
    width: calc(100vw - 1rem);
    margin: auto;
  }
  .promotional {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    margin-left: 1rem;
    .promotion-item {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }

  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }
  .product-img {
    display: block;
    width: 100%;
    height: calc(50vw - 2rem);
    margin: 0 auto;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding: 1rem 1rem 0;
    position: relative;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 1.3rem;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      font-size: 1.3rem;
      // height: 3.2rem;
      line-height: 2rem;
      letter-spacing: 0.5px;
      margin-top: 2px;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      font-size: 1.3rem;
      color: #ff0036;
      font-weight: bold;
      line-height: 4rem;
      span {
        font-size: 1.7rem;
      }
    }
    .share {
      color: #3c8a58;
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 10;
      i {
        font-size: 2rem;
      }
    }
    .estimate {
      color: #c5c5c5;
      text-decoration: line-through;
      margin-left: 0.5rem;
    }
  }
}
</style>
